<template>
  <div style="min-height: 100vh; overflow: auto; width: 1200px; margin: 0 auto">
    <!-- <router-link to="/main/renshi/kaoqing/qingjia" style="">返回</router-link> -->
    <span style="margin-top: 10px; display: flex">
      <el-button
        type="primary"
        @click="$router.push('/main/renshi/kaoqing/qingjia')"
        icon="el-icon-back"
        >返回</el-button
      >
    </span>
    <h2>请假申请列表</h2>
    <div class="search-bar">
      <el-input
        v-model="searchForm.name"
        placeholder="姓名"
        style="width: 200px; margin-right: 10px"
      />
      <el-input
        v-model="searchForm.employeeId"
        placeholder="工号"
        style="width: 200px; margin-right: 10px"
      />
      <el-select
        v-model="searchForm.leaveType"
        placeholder="请假类型"
        clearable
        style="width: 200px; margin-right: 10px"
      >
        <el-option label="事假" value="事假" />
        <el-option label="病假" value="病假" />
        <el-option label="年假" value="年假" />
        <el-option label="调休" value="调休" />
      </el-select>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
    <router-link
      to="/main/renshi/kaoqing/qingjia"
      style="margin: 20px; display: inline-block"
      ><el-button type="success" icon="el-icon-plus">新增申请</el-button></router-link
    >
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        prop="no"
        label="申请编号"
        width="calo(100% - 140)"
      ></el-table-column>
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column
        prop="department"
        label="部门"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="leaveType"
        label="请假类型"
        width="120"
      ></el-table-column>
      <el-table-column prop="plannedStartTime" label="开始时间" width="160">
        <template slot-scope="scope">
          {{ formatDateTime(scope.row.plannedStartTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="plannedEndTime" label="结束时间" width="160">
        <template slot-scope="scope">
          {{ formatDateTime(scope.row.plannedEndTime) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="plannedDays"
        label="请假天数"
        width="100"
      ></el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleDetail(scope.row)"
            >详情</el-button
          >
          <el-button size="mini" type="primary" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 详情对话框 -->
    <el-dialog title="请假申请详情" :visible.sync="dialogVisible" width="50%">
      <div v-if="detailData">
        <p><strong>申请编号：</strong>{{ detailData.no }}</p>
        <p><strong>姓名：</strong>{{ detailData.name }}</p>
        <p><strong>部门：</strong>{{ detailData.department }}</p>
        <p><strong>请假类型：</strong>{{ detailData.leaveType }}</p>
        <p><strong>请假原因：</strong>{{ detailData.reason }}</p>
        <p>
          <strong>开始时间：</strong
          >{{ formatDateTime(detailData.plannedStartTime) }}
        </p>
        <p>
          <strong>结束时间：</strong
          >{{ formatDateTime(detailData.plannedEndTime) }}
        </p>
        <p><strong>请假天数：</strong>{{ detailData.plannedDays }}</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getLeaveApplicationList,
  getLeaveApplicationDetail,
  deleteLeaveApplication,
} from "@/api/leave";

export default {
  data() {
    return {
      searchForm: {
        name: "",
        employeeId: "",
        leaveType: "",
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      detailData: null,
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        const response = await getLeaveApplicationList({
          current: this.currentPage,
          size: this.pageSize,
          name: this.searchForm.name,
          employeeId: this.searchForm.employeeId,
          leaveType: this.searchForm.leaveType,
        });
        this.tableData = response.records;
        this.total = response.total;
      } catch (error) {
        this.$message.error("获取数据失败：" + error.message);
      }
    },
    handleSearch() {
      this.currentPage = 1;
      this.fetchData();
    },
    async handleDetail(row) {
      try {
        const response = await getLeaveApplicationDetail(row.id);
        this.detailData = response.data;
        this.dialogVisible = true;
      } catch (error) {
        this.$message.error("获取详情失败：" + error.message);
      }
    },
    async handleDelete(row) {
      try {
        await this.$confirm("确认删除该请假申请？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        await deleteLeaveApplication(row.id);
        this.$message.success("删除成功");
        this.fetchData();
      } catch (error) {
        if (error !== "cancel") {
          this.$message.error("删除失败：" + error.message);
        }
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    handleEdit(row) {
      this.$router.push(`/main/renshi/kaoqing/qingjia?id=${row.id}&type=edit`);
    },
    formatDateTime(datetime) {
      if (!datetime) return "";
      const date = new Date(datetime);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
        2,
        "0"
      )}-${String(date.getDate()).padStart(2, "0")} ${String(
        date.getHours()
      ).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-table {
  /* margin-top: 20px; */
  width: 100%;
}

.el-pagination {
  margin-top: 20px;
  text-align: center;
}
</style>